<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="notice-box com-box">
			<!-- 分类 -->
			<view class="pc">
				<view class="cate-section">
					<view @click="naviageToPage('/pages/notice/win')" class="cate-item">
						<image class="sp" src="/static/msg01.png"></image>
						<text>中标通知</text>
					</view>
					<view @click="naviageToPage('/pages/notice/bid')" class="cate-item active">
						<image class="sp" src="/static/msg02.png"></image>
						<text>递标通知</text>
					</view>
					<view @click="naviageToPage('/pages/notice/system')" class="cate-item">
						<image class="sp" src="/static/msg03.png"></image>
						<text>系统消息</text>
					</view>
				</view>
			</view>

			<view v-for="(item, index) in noticeList" :key="index" class="notice-item">
				<view class="item">
					<image src="/static/msg05.png"></image>
				</view>
				<view class="content">
					<text class="title">{{item.title}}</text>
					<text class="introduce">{{item.content}}</text>
					<text class="time">{{$util.sliceTime(item.createTime)}}</text>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniHeader,
			uniFooter,
			uniLoadMore,
			uniPagination
		},
		data() {
			return {
				noticeList: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				loadingType: 'more', //加载更多状态
			}
		},
		onLoad() {
			this.loadData()
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/zruser/messagePage', {
					type: 3,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data
					if (type !== 'add') {
						this.noticeList = []
					}
					// this.pages = Math.ceil(res.data.total / this.pageSize)
					// this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.loadingType = 'nomore'
					this.noticeList = this.noticeList.concat(tempList)
					this.pageNum = this.pageNum + 1
					console.log(this.noticeList)
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			naviageToPage(page) {
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		padding-top: 20upx;
	}

	/* 分类 */
	.cate-section {
		margin-bottom: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 20upx 22upx 30upx;
		background: #fff;

		.cate-item {
			margin-top: 20upx;
			width: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $base-font-sm + 2upx;
			color: $base-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 90upx;
			height: 90upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}

	.notice-item {
		display: flex;
		justify-content: space-between;
		padding-left: 30upx;
		background-color: #fff;
		border-bottom: 1upx solid rgba(236, 236, 236, 1);

		image {
			margin-top: 20upx;
			width: 66upx;
			height: 60upx;
			vertical-align: top;
		}

		.content {
			flex: 1;
			padding: 20upx;
		}

		.title {
			display: block;
			height: 40upx;
			font-size: $base-font-base;
			color: $base-color-dark;
			line-height: 40upx;
		}

		.introduce {
			display: block;
			margin: 10upx 0;
			font-size: $base-font-base;
			color: $base-color-base;
			line-height: 40upx;
		}

		.time {
			display: block;
			font-size: $base-font-base;
			color: $base-color-base;
			line-height: 40upx;
		}
	}

	.h2-title {
		padding: 20upx 30upx;
		font-weight: bold;
		font-size: $base-font-base;
		color: $base-color-dark;
		line-height: 40upx;
		background-color: #fff;
		border: 1upx solid rgba(236, 236, 236, 1);
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-top: 0;
			padding-bottom: 0;
		}

		.notice-box {
			margin: 20px auto;
		}

		/* 分类 */
		.cate-section {
			justify-content: flex-start;
			margin-bottom: 0;
			padding: 0;
			border-bottom: 1px solid $base-color-light;

			.cate-item {
				margin-top: 0;
				width: 160px;
				font-size: 16px;
				line-height: 50px;
				cursor: pointer;

				&.active,
				&:hover {
					color: #fff;
					background-color: $base-color-page;
				}
			}

			image {
				display: none;
			}
		}

		.notice-item {
			padding-left: 30px;
			border-bottom: 1px solid rgba(236, 236, 236, 1);

			image {
				display: none;
			}

			.content {
				width: 100%;
				padding: 10px 30px 10px 0;
				border-bottom: 1px solid rgba(236, 236, 236, 1);
			}

			.title {
				height: 25px;
				font-size: 16px;
				line-height: 25px;
			}

			.introduce {
				margin: 0;
				font-size: 16px;
				line-height: 25px;
			}

			.time {
				font-size: 16px;
				line-height: 25px;
			}
		}

		.h2-title {
			padding: 10px 30px;
			font-size: 16px;
			line-height: 28px;
			border: 1px solid rgba(236, 236, 236, 1);
		}
	}

	/* #endif */
</style>
